<template>
  <!-- 文章列表 -->
  <div class="container">
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li v-for="(item, index) in list" :key="index" :class="{ active: item === tag }" @click="tagChange(item)">{{
          item }}
        </li>
      </ul>
      <!-- 搜索 -->
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜索" v-model="searchKeys" @keyup.enter="search">
      </div>
    </nav>
    <!-- 文章列表 -->
    <main v-if="tag !== '热门'">
      <template v-if="passageList.length">
        <Article v-for="(item, index) in passageList" :key="index" :list="item"></Article>
      </template>
      <template v-else>
        <div class="no-data">
          暂无文章
        </div>
      </template>
      <!-- 分页控制器 -->
      <PageControl v-show="tag != '推荐'" :page="page" :sum="sum" :page-size="pageSize" @pageChangeHandler="pageChange" />
    </main>
    <div class="hot" v-else>
      <Hot :list="passageList" :more="true"></Hot>
    </div>
  </div>
</template>

<script setup>
import { reqGetArticleList, reqGetHotArticleList, reqGetPassageByClass, reqHomeSearch } from '@/apis/passage';
import Article from '../Home/Article.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import PageControl from '@/components/PageControl.vue'
import Hot from '@/components/Hot.vue';
import userStore from '@/stores/modules/user';

let route = useRoute()
let tag = ref(`${route.query.type ? '热门' : '推荐'}`)
let list = ref(['推荐', '热门', '生活记录', '技术知识', '文化艺术', '商业财经', '教育学习', '情感心理'])
let page = ref(1)
let sum = ref(0) //总共多少个文章
let pageSize = ref(0) //每页多少个文章
// 文章列表
let passageList = ref([])
let searchKeys = ref('')
onMounted(() => {
  getArticle()
})

// 分页控制器
const pageChange = (pager) => {
  page.value = pager
  console.log(pager);
  getArticleByClass()
  window.scrollTo(0, 0)
}
// 获得推荐文章
const getArticle = async () => {
  let res = await reqGetArticleList(userStore().userId)
  if (res.code === 200) {
    passageList.value = res.data
  } else {
    console.log('获取推荐文章失败:', res.msg);
  }
}
// 获取不同类型的文章
const getArticleByClass = async () => {
  let res = await reqGetPassageByClass({ categoryName: tag.value, page: page.value })
  if (res.code === 200) {
    passageList.value = res.data.articlesList
    sum.value = res.data.rows
    pageSize.value = res.data.articlesList.length
  } else {
    console.log('获取不同类型文章失败:', res.msg);
  }
}

// 获取热门文章
const getHotArticle = async () => {
  let res = await reqGetHotArticleList(15)
  if (res.code === 200) {
    passageList.value = res.data
  } else {
    console.log('获取热门文章失败:', res.msg);
  }
}

// 标签切换
const tagChange = (item) => {
  tag.value = item
  if (item === '推荐') {
    getArticle()
  } else if (item === '热门') {
    getHotArticle()
  } else {
    getArticleByClass()
  }
}
const search = async () => {
  tag.value = '搜索'
  let res = await reqHomeSearch({ keyword: searchKeys.value, page: page.value })
  if (res.code == 200) {
    passageList.value = res.data
    // 搜索关键词高亮显示
    let reg = new RegExp(searchKeys.value, 'g')
    passageList.value.forEach(item => {
      item.title = item.title.replace(reg, `<mark style="color: red;">${searchKeys.value}</mark>`)
      item.content = item.content.replace(reg, `<mark style="color: red;">${searchKeys.value}</mark>`)
    })
  } else {
    console.log('搜索文章失败:', res);
  }
}
</script>

<style lang="scss" scoped>
// 文章列表
.container {
  background-color: #fff;
  margin: .1667rem auto 0;
  width: 90%;

  // 导航栏
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    border-bottom: .0167rem solid #000;
    padding-top: .1667rem;
    width: 90%;

    ul {
      box-sizing: border-box;
      overflow: hidden;

      li {
        display: inline-block;
        box-sizing: border-box;
        margin: 0 .333rem;
        height: .8rem;
        font-size: .3333rem;
        line-height: .8rem;
        color: #333;
        cursor: pointer;

        &:hover {
          border-bottom: #000 solid .0167rem;
        }
      }

      .active {
        border-bottom: #000 solid .0333rem;
        font-weight: bold;
        color: #654321;
      }
    }

    // 搜索
    .search {
      display: flex;
      align-items: center;
      gap: .15rem;

      input {
        background-color: transparent;
        border: none;
        outline: none;
        font-size: .2667rem;
        color: #333;
      }
    }
  }

  // 文章列表
  main {
    margin: auto;
    padding: .133rem 0 .5rem;
    width: 85%;

    .no-data {
      padding: .6667rem 0;
      font-size: .4rem;
      color: #999;
      text-align: center;
    }
  }

  .hot {
    padding-bottom: .0667rem;
  }
}
</style>